import React from 'react';
import { Card, Tabs, Space, Avatar, Button } from 'antd';
import styles from './ProjectDetail.module.scss';
import teamStyles from './TeamMember.module.scss';
import TabPane from 'antd/es/tabs/TabPane';

const teamContent = {
  title: '胡欣扬',
  desc: '所在学院:计算机学院(国家示范性软件学院)',
  content: '2021级本科生，软件工程方向，精通前端技术，擅长HTML/CSS/JS',
};

const Second: React.FC = () => {
  const renderMemberCard = () => {
    return (
      <div className={styles.card}>
        <div className={styles.cardTop}>
          <Avatar
            size={70}
            src="https://imgs.699pic.com/images/500/997/851.jpg!list1x.v2"
          />
          <div className={styles.show}>
            <div style={{ display: 'flex', alignItems: 'center' }}>
              <span
                style={{
                  fontWeight: '800',
                  marginRight: '1em',
                  fontSize: '20px',
                }}
              >
                {teamContent.title}
              </span>
            </div>
            <div style={{ color: '#81838f', fontSize: '16px'}}>
              {teamContent.desc}
            </div>
          </div>
        </div>
        <span style={{fontSize:'18px'}}> {teamContent.content}</span>
      </div>
    );
  };
  return (
    <div className={styles.projectDetailContainer}>
      <nav>
        <div className={styles.navtop}>
          <Space>
            <span className={styles.title}>码上</span>
          </Space>
          <Button type="primary" style={{fontSize:'18px', borderRadius:'0px',backgroundColor:'#2468f2',padding:'18px 20px'}}>立刻申请</Button>
        </div>
        <div style={{ marginTop:'0.8em',marginBottom: '1.13em', color: '#81838f', fontSize:'18px'}}>
          具备团队合作精神，责任心强，能够承受一定的工作压力;有特定证书/语言能力/项目管理经验
        </div>
        <div style={{ marginBottom: '.4em' }}>
          <Space>
            <span className={styles.tags}>Java</span>
            <span className={styles.tags}>前端开发</span>
            <span className={styles.tags}>校内导师</span>
          </Space>
        </div>
      </nav>
      <Card className={styles.projectCard}>
        <Tabs defaultActiveKey="1" tabBarStyle={{ textAlign: 'center', marginRight: '20px',}}indicator={{ size: (origin) => origin + 20,align: 'center' }} >
            <TabPane tab={<span style={{paddingLeft:'24px', marginRight:'20px'}}>招募信息</span>} key='1'>
            <div className={styles.tabs}>
        <div>
          <span className={styles.tabTitle}>项目信息</span>
          <div className={teamStyles.cardWrapper}>
            项目类型:创新项目
            <br />
            发布时间:2024/07/30
          </div>
        </div>
        <div style={{ marginTop: '2em' }}>
          <span className={styles.tabTitle}>项目内容</span>
          <div className={teamStyles.cardWrapper}>
            利用机器学习和深度学习技术，通过对蜂窝网络测量数据的实时分析和预测，结合移动性测试要求、设计蜂窝小区邻区匹配模型和切换策略、实现智能化的移动通信网络质呈优化算法。
          </div>
        </div>
        <div style={{ marginTop: '2em' }}>
          <span className={styles.tabTitle}>项目目标</span>
          <div className={teamStyles.cardWrapper}>
            1.设备移动性分析:调研移动通信中小区变更方式，分析切换，重选和重定向等状态和场景下的通信流程。{' '}
            <br />
            2.模型训练与优化:使用机器学习和深度学习技术，开发并训练网络优化模型，提高网络资源分配的效率和准确性。{' '}
            <br />
            3.系统测试和验证:在实验室网络环境中进行测试和验证，确保算法的稳定性可靠性和优化结果
          </div>
        </div>
        <div style={{ marginTop: '2em' }}>
          <span className={styles.tabTitle}>希望成果形式</span>
          <div className={teamStyles.cardWrapper}>
            这个项目比那些算法优化项目相对更好一些出结果，预计可以设计出一套实验室环境下稳定有效的移动通信网络质量优化算法。
          </div>
        </div>
        <div style={{ marginTop: '2em' }}>
          <span className={styles.tabTitle}>所需学生说明</span>
          <div className={teamStyles.cardWrapper}>
            最好是通信或者A，计算机学院相关专业，实践能力强
          </div>
        </div>
        <div style={{ marginTop: '2em' }}>
          <span className={styles.tabTitle}>项目负责人</span>
          <div className={teamStyles.cardWrapper}>{renderMemberCard()}</div>
        </div>
      </div>
    </TabPane>
    </Tabs>
    </Card>
    </div>
  );
};

export default Second;
